<template>
  <div class="user-info-container">
    <el-card class="print-box">
      <el-button v-print="printObj" type="primary" @click="printBtn">打印</el-button>
    </el-card>
    <el-card>
      <div id="userInfoBox" class="user-info-box">
        <h2 class="title">用户信息</h2>

        <div class="header">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="姓名">{{ detailData.username }}</el-descriptions-item>
            <el-descriptions-item label="性别">{{ detailData.gender }}</el-descriptions-item>
            <el-descriptions-item label="国籍">{{ detailData.nationality }}</el-descriptions-item>
            <el-descriptions-item label="手机号码">{{ detailData.mobile }}</el-descriptions-item>
            <el-descriptions-item label="省份">{{ detailData.province }}</el-descriptions-item>
            <el-descriptions-item label="日期">{{ detailData.openTime }}</el-descriptions-item>
            <el-descriptions-item label="地址" span="2">{{ detailData.address }}</el-descriptions-item>
          </el-descriptions>
          <el-image :src="detailData.avatar" class="avatar"></el-image>
        </div>
        <div class="body">
          <el-descriptions :column="1" border direction="vertical">
            <el-descriptions-item label="工作经历">
              <ul>
                <li v-for="(item, index) in detailData.experience" :key="index">
                  <span>{{ item.startTime }} - {{ item.endTime }}</span>
                  <span>{{ item.title }}</span>
                  <span>{{ item.desc }}</span>
                </li>
              </ul>
            </el-descriptions-item>
            <el-descriptions-item label="专业">{{ detailData.major }}</el-descriptions-item>
            <el-descriptions-item label="荣誉">{{ detailData.glory }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="foot">签名：{{ detailData.signature }}</div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import {ref} from 'vue';
import print from 'vue3-print-nb'


let detailData = ref({
  username: '张三',
  gender: '男',
  nationality: '中国',
  mobile: '1234567890',
  province: '北京',
  openTime: '2022-05-30',
  address: '北京市朝阳区',
  avatar: 'path/to/avatar.jpg',
  experience: [
    {startTime: '2020-01-01', endTime: '2021-01-01', title: '工作经历1', desc: '描述1'},
    {startTime: '2018-01-01', endTime: '2019-01-01', title: '工作经历2', desc: '描述2'}
  ],
  major: '计算机科学',
  glory: '荣誉奖项',
  signature: '签名内容'
});

const printObj = {
  // 打印区域
  id: 'userInfoBox',
  // 打印标题
  popTitle: '局部打印',
}

function printBtn() {
  console.log(print)


}
</script>


<style lang="scss" scoped>
.user-info-container {
  padding: 20px;
}

.print-box {
  margin-bottom: 20px;
  text-align: right;
}

.user-info-box {
  width: 1024px;
  margin: 0 auto;

  .title {
    text-align: center;
    margin-bottom: 18px;
  }

  .header {
    display: flex;

    .el-descriptions {
      flex-grow: 1;
    }

    .avatar {
      width: 187px;
      box-sizing: border-box;
      padding: 30px 20px;
      border: 1px solid #ebeef5;
      border-left: none;
    }
  }

  .body {
    ul {
      list-style: none;

      li {
        span {
          margin-right: 62px;
        }
      }
    }
  }

  .foot {
    margin-top: 42px;
    text-align: right;
  }
}
</style>
